<template>
  <div>
    <!-- 导航栏 开始 -->
    <uni-search-bar bgColor="#EEEEEE" :focus="true" :placeholder="placeholder" :cancelButton="cancelButton" :value="value" @confirm="search" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear" />
    <!-- 导航栏 结束-->
  </div>
</template>

<script>
import { uniSearchBar } from '@dcloudio/uni-ui'
export default {
  components: { uniSearchBar },
  props: {
    placeholder: {
      type: [String, null],
      default: '搜索售点',
    },
    cancelButton: {
      type: [Boolean, null],
      default: true,
    },
    value: {
      type: [String, Number, null],
      default: '',
    },
  },
  watch:{
    placeholder(n){
      console.log(n)
    }
  },
  data() {
    return { searchValue: '' }
  },
  mounted() {},
  methods: {
    search({ value }) {
      this.$emit('update:value', value)
      uni.showToast({
        title: '搜索：' + value,
        icon: 'none',
      })
    },
    input(value) {
        this.$emit('input',value)
    },
    clear(res) {
      // uni.showToast({
      //   title: 'clear事件，清除值为：' + res.value,
      //   icon: 'none',
      // })
    },
    blur(res) {
      // uni.showToast({
      //   title: 'blur事件，输入值为：' + res.value,
      //   icon: 'none',
      // })
    },
    focus(e) {
      // uni.showToast({
      //   title: 'focus事件，输出值为：' + e.value,
      //   icon: 'none',
      // })
    },
    cancel(res) {
      // uni.showToast({
      //   title: '点击取消，输入值为：' + res.value,
      //   icon: 'none',
      // })
    },
  },
}
</script>

<style scoped></style>
